<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>浮动定位</title>
		<!-- 浮动 float属性
		    浮动定位可以让元素脱离文档流，脱离文档流后会呈现靠左，右
			作用：左右【页面区域】布局，图片与文本环绕
			作用：一旦元素加浮动，变成块级元素【可设置高宽，独占一行】
		 -->
		 <!-- 外部样式表 -->
		 <link rel="stylesheet" href="css/浮动.css">
	</head>
	<style>
		div{
			width: 300px;
			      height: 300px;
			      border-radius: 50%; 
			      background-color: lightblue; 
			      display: flex; 
			      justify-content: center; 
			      align-items: center; 
			      font-size: 24px; 
			
		}
	</style>
	<body>
		<!-- 4个空间 -->
		<div class="d1">1</div>
		<div class="d2">2</div>
		<div class="d3">3</div>
		<div class="d4">4</div>
		
	</body>
</html>